<template lang="html">
  <div id="pageBox" class="pd14">
    <div class="creditBox bgStyle pd14">
      <div class="title">
        <span class="btn commmonBtn fr" @click="onVierRule">学分规则</span>
      </div>
      <div class="creditContent">
        <div class="contentNote">
          每本书学完后更新学分
        </div>
        <div class="content">
          <div class="echarts" :class="'style'+result[0]">
            {{ result[1] }}
          </div>
          <div class="numBox">
            <p class="num">{{ totalCredit }}</p>
            <p class="numNote">本期学分</p>
          </div>
        </div>
      </div>
    </div>
    <div class="creditList">
      <div v-for="(item, index) in bookList" :key="index" class="creditItem bgStyle">
        <div class="imgBox">
          <img :src="item.book.coverImg" alt="">
        </div>
        <div class="list-main">
          <div class="report">成绩单:第{{ item.week }}周</div>
          <div class="bookName">{{ item.book.bookName }}</div>
          <div class="week-reprot">本周学分: <span class="cj">0</span></div>
        </div>
      </div>
    </div>
    <div v-if="showRule" class="rule-modal" @click="showRule = false">
      <div class="rule-modal-main" v-html="ruleHtml" @click.stop=""></div>
    </div>
  </div>
</template>

<script>
import { getMyLearned, getRule } from '@/api/pay'
export default {
  data() {
    return {
      totalCredit: this.$route.query.totalCredit || 0,
      semesterTotal: 0,
      bookList: [],
      showRule: false,
      ruleHtml: ''
    }
  },
  computed: {
    result() {
      const { totalCredit, semesterTotal } = this
      let preText = '', pre;
      if (semesterTotal === 0) {
        pre = 1
        preText = '结业'
        return [pre, preText]
      }
      const per = (this.totalCredit/this.semesterTotal).toFixed(2)
      if (per < 0.2) {
        pre = 1
        preText = '结业'
      } else if (per < 0.6) {
        pre = 2
        preText = '毕业'
      } else if (per < 0.8) {
        pre = 3
        preText = '优秀'
      }
      return [pre, preText]
    }
  },
  created() {
    getMyLearned().then(res => {
      this.semesterTotal = res.semesterTotal || 0
      this.bookList = res.books
    })
  },
  methods: {
    onVierRule() {
      getRule().then(res => {
        this.ruleHtml = res.rule
        this.showRule = true
      })
    }
  },
}
</script>

<style lang="less" scoped>
  #pageBox{
    .bgStyle{
      border:1px solid #dedede;
      border-radius: 0.1rem;
      background:#fff;
    }
    .commmonBtn{
      font-size:0.12rem;
      border:1px solid #1062DE;
      color:#1062DE;
      padding:0.02rem 0.1rem;
      border-radius: 0.12rem;
    }
    .creditBox{
      .title{
        height:0.5rem;
        border-bottom:1px dashed #dedede;
        .icon{
          line-height: 0.5rem;
          font-size:0.2rem;
        }
        .btn{
          margin-top:0.13rem;
        }
      }
      .creditContent{
        .contentNote{
          text-align: right;
          color:#999;
          margin:0.08rem 0;
          font-size:0.12rem;
        }
        .content{
          display: flex;
          padding-bottom:0.2rem;
          .echarts{
            flex:1;
            height: .5rem;
            text-align: center;
            font-size: .2rem;
            line-height: 2;
            &.style1{
              text-shadow: 0px 0px 6px #096dd9;
              color: #096dd9;
            }
            &.style2{
              text-shadow: 0px 0px 6px #237804;
              color: #237804
            }
            &.style3{
              text-shadow: 0px 0px 6px #a8071a;
              color: #a8071a;
            }
          }
          .numBox{
            flex:1;
            .num{
              font-weight: bold;
              font-size:0.3rem;
              line-height: 0.34rem;
            }
            .numNote{
              color:#999;
              font-size:0.14rem;
            }
          }
        }
      }
    }
  }
  .creditList{
    padding-top: .12rem;
  }
  .creditItem{
    width: 100%;
    height: 1.5rem;
    border-radius: .1rem;
    border: 1px solid #e8e8e8;
    margin-top: .3rem;
    position: relative;
  }
  .imgBox{
    position: absolute;
    width: 1.1rem;
    height: 1.6rem;
    top: -.2rem;
    left: .2rem;
    box-shadow: 0 0 6px 0 #888;
    img{
      width: 100%;
      height: 100%;
      border-radius: 4px;
    }
  }
  .list-main{
    padding-left: 1.5rem;
    padding-right: .12rem;
    padding-top: .2rem;
    .report{
      text-align: right;
      color: #666;
      font-size: .13rem;
    }
    .bookName{
      font-size: .18rem;
      line-height: 2.2;
      font-weight: bold;
      color: #282828;
    }
    .week-reprot{
      font-size: .13rem;
      color: #666;
    }
    .cj{
      font-size: #7cb305;
    }
  }
  .rule-modal{
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6);
  }
  .rule-modal-main{
    position: absolute;
    width: 80%;
    height: 4rem;
    border-radius: 10px;
    background: #fff;
    font-size: .14rem;
    color: #666;
    left: 10%;
    top: 50%;
    margin-top: -2rem;
    padding: .12rem;
    box-sizing: border-box;
  }
</style>
